<template>
  <div class="user-form form-contain">
    <!-- 个人中心 -->
    <h4>基本信息</h4>
    <div>
      <div class="user-left">
        <p>用户名称</p>
        <p>手机</p>
      </div>
      <div class="user-right">
        <p>{{myname}}</p>
        <p>{{mytel}}<el-button type="text" style="margin-left:20px" @click="dialogTableVisible = true">修改</el-button></p>
      </div>
    </div>
    <h4>修改密码</h4>
    <div>
      <div class="user-left">
        <p>手机</p>
        <p><span>*</span>验证码</p>
        <p><span>*</span>新密码</p>
        <p><span>*</span>再次输入新密码</p>
      </div>
      <div class="user-right">
        <p style="margin-left:20px">{{mytel}}</p>
        <p>
          <el-input v-model="input" placeholder="输入验证码" style="width:15%"></el-input>
          <el-button type="primary"
          style="margin-left:30px"
          @click="_reqCode"
          :disabled="verificationBtn">{{Verification}}</el-button>
        </p>
        <p>
          <el-input v-model="input1" placeholder="请输入新密码" style="width:30%"></el-input>
        </p>
        <p>
          <el-input v-model="input2" placeholder="请再次输入新密码" style="width:30%"></el-input>
        </p>
        <el-button type='primary' style="margin-top:30px;margin-left:20px" @click="_modifyPsw">
          确认修改
        </el-button>
      </div>
    </div>
    <el-dialog title="修改手机号" :visible.sync="dialogTableVisible">
      <el-input v-model="input3" placeholder="请输入新手机号" style="width:40%;margin-bottom:40px"></el-input>
      <div>
        <el-input v-model="input4" placeholder="输入验证码" style="width:25%"></el-input>     
        <el-button type="primary"
        @click="_reqCode1"
        :disabled="verificationBtn1"
        style="margin-left:10px">{{Verification1}}</el-button>   
      </div>
      <el-button type="primary" @click="_modify" style="margin-left:80%">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {getTimer, setTimer, getTimer1, setTimer1} from '@/utils/timing'
import {shopNumber, getUser, getSms} from '@/api/person'
export default {
  data () {
    return {
      input: null,
      input1: null,
      input2: '',
      input3: null,
      input4: null,
      timer: 0,
      Verification: '获取验证码',
      verificationBtn: true,
      Verification1: '获取验证码',
      verificationBtn1: true,
      mytel: null,
      myname: '',
      dialogTableVisible: false
    }
  },
  mounted () {
    if (getTimer() < 60) {
      let timer = setInterval(() => {
        let time = getTimer()
        this.Verification = `请稍等(${time}s)`
        if (time === 60) {
          this.Verification = '获取验证码'
          this.verificationBtn = false
          clearInterval(timer)
        }
      }, 1000)
    } else {
      this.Verification = '获取验证码'
      this.verificationBtn = false
    }
    if (getTimer1() < 60) {
      let timer = setInterval(() => {
        let time = getTimer1()
        this.Verification1 = `请稍等(${time}s)`
        if (time === 60) {
          this.Verification1 = '获取验证码'
          this.verificationBtn1 = false
          clearInterval(timer)
        }
      }, 1000)
    } else {
      this.Verification1 = '获取验证码'
      this.verificationBtn1 = false
    }
    this.myname = JSON.parse(localStorage.getItem('user')).user_name
    this._load()
  },
  methods: {
    // 修改密码获取验证码
    _reqCode () {
      setTimer()
      this.verificationBtn = true
      let timer = setInterval(() => {
        let time = getTimer()
        if (time < 60) {
          this.Verification = `请稍等(${time}s)`
        } else {
          this.verificationBtn = false
          this.$set(this, 'Verification', '获取验证码')
          clearInterval(timer)
        }
      }, 1000)
      getSms({user_name: this.myname}).then(res => {
        this.$message({
          type: 'success',
          message: '验证码已发送'
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改手机号码获取验证
    _reqCode1 () {
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/
      let telTrue = reg.test(this.input3)
      if (this.input3 !== this.mytel && !telTrue) {
        this.$message({
          type: 'info',
          message: '请输入正确的手机号'
        })
      } else {
        setTimer1()
        this.verificationBtn1 = true
        let timer = setInterval(() => {
          let time = getTimer1()
          if (time < 60) {
            this.Verification1 = `请稍等(${time}s)`
          } else {
            this.verificationBtn1 = false
            this.$set(this, 'Verification1', '获取验证码')
            clearInterval(timer)
          }
        }, 1000)
        getSms({user_name: this.myname}).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '验证码已发送'
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 修改手机号
    _modify () {
      let params = {
        user_name: this.myname,
        contact_tel: this.input3,
        sms_code: this.input4
      }
      shopNumber(params).then(res => {
        if (res.code === 1) {
          this.dialogTableVisible = false
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this._load()
        } else {
          this.$message({
            type: 'info',
            message: '验证码错误'
          })
        }
      })
    },
    _modifyPsw () {
      if (this.input.length !== 4) {
        this.$message({
          type: 'info',
          message: '验证码错误'
        })
      } else if (this.input2 !== this.input1) {
        this.$message({
          type: 'info',
          message: '两次输入密码不一致'
        })
      } else if (this.input1 === '') {
        this.$message({
          type: 'info',
          message: '密码不能为空'
        })
      } else {
        let params = {
          user_name: this.myname,
          sms_code: this.input,
          newPassword: this.input1,
          newPasswordAgain: this.input2
        }
        shopNumber(params).then(res => {
          if (res.code === 1) {
            this.$message({
              type: 'success',
              message: '密码修改成功'
            })
            this.input = ''
            this.input1 = ''
            this.input2 = ''
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    _load () {
      let name = JSON.parse(localStorage.getItem('user'))
      let params = {
        user_name: name.user_name
      }
      getUser(params).then(res => {
        if (res.code === 1) {
          this.mytel = res.data.contact_tel
        } else {
          this.$message({
            type: 'info',
            message: '请求错误'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  watch: {
    Verification (news, old) {
      // console.log(1)
      // console.log(old)
      // console.log(news)
    }
  }
}
</script>

<style lang="less">
.user-form{
  h4{
    color: #3f76b5;
    width: 100%;
    border-bottom: 1px dotted #bbbbbb;
    line-height: 60px;
  }
  .user-left{
    float: left;
    width: 20%;
    p{
      color: #101010;
      text-align: right;     
      line-height: 40px; 
      span{
        color: rgb(229, 28, 35);
      }
    }
  }
  .user-right{
    width: 80%;
    height: 150px;
    float: left;
    text-indent: 20px;
    p{
      line-height: 40px;
    }
  }
}
</style>
